<template>
  <div class="info">
    <c-back class="header" :tab="tab" :rightFun="editUser"></c-back>
    <div class="userInfo">
      <img :src="$store.state.user.image" width="100" height="100">
      <p>刘德华</p>
    </div>
    <form>
      <mt-field label="用户名" placeholder="请输入用户名" v-model="$store.state.user.name" :readonly="edit"  disableClear></mt-field>
      <mt-field label="地址" placeholder="请输入地址" v-model="$store.state.user.address" :readonly="edit" disableClear></mt-field>
      <mt-field label="邮箱" placeholder="请输入邮箱" type="email" v-model="$store.state.user.description" :readonly="edit"
                disableClear></mt-field>
      <mt-field label="手机号" placeholder="请输入手机号" type="tel" v-model="$store.state.user.telPhone" :readonly="edit"
                disableClear></mt-field>
      <mt-field label="生日" placeholder="请选择生日日期" v-model="$store.state.user.birthday | formatDate" @click.native="open('picker2')" :readonly="true"  ></mt-field>
      <mt-datetime-picker
        ref="picker2"
        type="date"
        v-model="$store.state.user.birthday"
        @confirm="handleChange">
      </mt-datetime-picker>
      <mt-button @click.native="open('picker2')" size="large">点击弹出 Date Picker</mt-button>
      <!--<mt-radio-->
        <!--title="性别"-->
        <!--v-model="$store.state.user.sex"-->
        <!--:options="options"-->
        <!--align="right"-->
      <!--&gt;-->
      <!--</mt-radio>-->
      <!--<mt-field label="自我介绍" placeholder="自我介绍" type="textarea" rows="4" v-model="$store.state.user.description"-->
                <!--readonly disableClear></mt-field>-->
    </form>
  </div>
</template>
<script>
  import CBack from '../../../components/BackFun.vue'
  import FormatDate from '../../../utils/date'

  export default {
    components: {
      CBack
    },
    data () {
      return {
        edit:true, // 是否可以编辑
        tab: {
          title: '个人资料',
          rightText: '编辑',
          rightPath: '/user/userEdit',
          white: true
        },
        options: [
          {
            label: '男',
            value: '1',
            disabled: this.edit
          },
          {
            label: '女',
            value: '2'
          }
        ],
      }
    },
    methods: {
      editUser() {
        this.edit=false;
      },
      handleChange(value) {
        console.log(value.toString())
      },

    },
    filters: {
      formatDate(time) {
        let date = new Date(time);
        return FormatDate(date, 'yyyy-MM-dd hh : mm');
      }
    },

  }
</script>
<style lang='scss'>
  @import '../../../assets/style/common';
  @import 'user';
</style>
